<page-header title="创建产品" [breadcrumb]="breadcrumb" [action]="action" [back]="true">
    <ng-template #breadcrumb>
        <ql-breadcrumb>
            <ql-breadcrumb-item>产品管理</ql-breadcrumb-item>
            <ql-breadcrumb-item>产品目录</ql-breadcrumb-item>
            <ql-breadcrumb-item>创建产品</ql-breadcrumb-item>
        </ql-breadcrumb>
    </ng-template>
    <ng-template #action>

        <ql-button type="primary" [routerLink]="['/product/product-list']" (click)="creatProduct()">提交</ql-button>
    </ng-template>
</page-header>

<page-container>
    <ql-form label-width="130px">
        <ql-card header="产品详情">
            <div ql-row>
                <ql-form-item label="产品名称" ql-col span="12">
                    <ql-input> </ql-input>
                </ql-form-item>
                <ql-form-item label="产品编码" ql-col span="12">
                    <ql-input> </ql-input>
                </ql-form-item>
                <ql-form-item label="产品介绍" ql-col span="12">
                    <ql-input></ql-input>
                </ql-form-item>
                <ql-form-item label="产品利率" ql-col span="12">
                    <ql-input></ql-input>
                </ql-form-item>
                <ql-form-item label="推荐类别" ql-col span="12">
                    <ql-input></ql-input>
                </ql-form-item>
                <ql-form-item label="推荐原因" ql-col span="12">
                    <ql-input></ql-input>
                </ql-form-item>
                <ql-form-item label="风险等级" ql-col span="12">
                    <ql-select placeholder="选择风险等级" style="float: left">
                        <ql-option *ngFor="let item of []" [label]="item.label" [value]="item.value"> </ql-option>
                    </ql-select>
                </ql-form-item>
                <ql-form-item label="适用客户类型标签" ql-col span="12">
                    <ql-select placeholder="选择适用客户类型标签" style="float: left">
                        <ql-option *ngFor="let item of []" [label]="item.label" [value]="item.value"> </ql-option>
                    </ql-select>
                </ql-form-item>
                <ql-form-item label="产品一级目录类别" ql-col span="12">
                    <ql-select placeholder="选择产品一级目录类别" style="float: left">
                        <ql-option *ngFor="let item of []" [label]="item.label" [value]="item.value"> </ql-option>
                    </ql-select>
                </ql-form-item>
                <ql-form-item label="产品二级目录类别" ql-col span="12">
                    <ql-select placeholder="选择产品二级目录类别" style="float: left">
                        <ql-option *ngFor="let item of []" [label]="item.label" [value]="item.value"> </ql-option>
                    </ql-select>
                </ql-form-item>
                <ql-form-item label="发售时间" ql-col span="12">
                    <ql-date-picker></ql-date-picker>
                </ql-form-item>
                <ql-form-item label="停售时间" ql-col span="12">
                    <ql-date-picker></ql-date-picker>
                </ql-form-item>
            </div>
        </ql-card>
        <ql-card header="业务及办理规定">
            <div ql-row>
                <ql-form-item label="适用范围" ql-col span="24">
                    <ql-input type="textarea" [autosize]="{ minRows: 6, maxRows: 10}" placeholder="请输入内容">
                    </ql-input>
                </ql-form-item>
                <ql-form-item label="办理规定" ql-col span="24">
                    <ql-input type="textarea" [autosize]="{ minRows: 6, maxRows: 10}" placeholder="请输入内容"></ql-input>
                </ql-form-item>
                <ql-form-item label="适用范围" ql-col span="24">
                    <ql-input type="textarea" [autosize]="{ minRows: 6, maxRows: 10}" placeholder="请输入内容">
                    </ql-input>
                </ql-form-item>
            </div>
        </ql-card>
        <ql-card header="营销垫板">
            <!-- <ng-template #header>
                <card-header title="选择客户">
                    <ql-button type="primary" (click)="onSelectCustomer()" size="small">添加客户</ql-button>
                </card-header>
            </ng-template> -->
            <ng-template #header card-header>
                <card-header title="选择客户">
                    <ql-button type="primary" (click)="onSelectCustomer()" size="small">选择客户</ql-button>
                </card-header>
            </ng-template>
            <data-table [model]="customerList">
                <ql-table-column model-key="ctCode" label="客户编号"> </ql-table-column>
                <ql-table-column model-key="ctName" label="客户姓名"> </ql-table-column>
                <ql-table-column model-key="ctsex" label="性别" width="80"> </ql-table-column>
                <ql-table-column model-key="ctage" label="年龄" width="80"> </ql-table-column>
                <ql-table-column model-key="ctType" label="客户类型"> </ql-table-column>
                <ql-table-column model-key="ctLevel" label="客户等级"> </ql-table-column>
                <ql-table-column model-key="ctTel" label="客户电话"> </ql-table-column>
                <ql-table-column model-key="time" label="开户时间"> </ql-table-column>
            </data-table>
        </ql-card>
        <ql-card>
            <ng-template #header>
                <card-header title="客户标签">
                    <ql-button type="primary" (click)="onSelectTag()" size="small">选择标签</ql-button>
                </card-header>
            </ng-template>
            <data-table [model]="customerTag">
                <ql-table-column model-key="name" label="标签名称"></ql-table-column>
                <ql-table-column model-key="code" label="标签编码"></ql-table-column>
                <ql-table-column model-key="type" label="标签类别"></ql-table-column>
                <ql-table-column model-key="frequency" label="使用频次"></ql-table-column>
                <ql-table-column model-key="description" label="标签说明"></ql-table-column>
                <ql-table-column model-key="createTime" label="创建日期"></ql-table-column>
                <ql-table-column model-key="count" label="客户数量"></ql-table-column>
                <ql-table-column model-key="state" label="标签状态"></ql-table-column>
            </data-table>
        </ql-card>
        <ql-card>
            <ng-template #header>
                <card-header title="客户分组">
                    <ql-button type="primary" (click)="onSelectGroup()" size="small">选择分组</ql-button>
                </card-header>
            </ng-template>
            <data-table [model]="customerGroup">
                <ql-table-column model-key="code" label="群组编号"> </ql-table-column>
                <ql-table-column model-key="name" label="群组名称"> </ql-table-column>
                <ql-table-column model-key="description" label="群组描述"> </ql-table-column>
                <ql-table-column model-key="createTime" label="创建时间"> </ql-table-column>
                <ql-table-column model-key="creator" label="创建人"> </ql-table-column>
                <ql-table-column model-key="count" label="客户数量"> </ql-table-column>
                <ql-table-column model-key="state" label="群组状态"> </ql-table-column>
            </data-table>
        </ql-card>
        <ql-card header="促销活动">
            <div ql-row>
                <ql-form-item ql-col span="12" label="活动主题">
                    <ql-input placeholder="请输入内容"></ql-input>
                </ql-form-item>
                <ql-form-item label="活动范围" ql-col span="12">
                    <ql-select placeholder="选择活动范围" style="float: left">
                        <ql-option *ngFor="let item of []" [label]="item.label" [value]="item.value"> </ql-option>
                    </ql-select>
                </ql-form-item>
                <ql-form-item label="活动内容" ql-col span="12">
                    <ql-input placeholder="请输入内容"></ql-input>
                </ql-form-item>
                <ql-form-item label="活动附带权益" ql-col span="12">
                    <ql-input placeholder="请输入内容"></ql-input>
                </ql-form-item>
                <ql-form-item label="活动开始时间" ql-col span="12">
                    <ql-date-picker></ql-date-picker>
                </ql-form-item>
                <ql-form-item label="活动结束时间" ql-col span="12">
                    <ql-date-picker></ql-date-picker>
                </ql-form-item>
            </div>
        </ql-card>
    </ql-form>
</page-container>